<template>
  <div class="project-archive-index">
    <wrapper-content :showHeader="false">
      <div style="display: flex; justify-content: center;">
        <img
          style="height: 250px;"
          src="@/assets/image/common/nullContent.png"
          alt
          v-show="!dataSource.length"
        />
      </div>
      <a-list
        class="project-list"
        :loading="loading"
        itemLayout="horizontal"
        :dataSource="dataSource"
        :locale="{emptyText: ''}"
      >
        <div
          v-if="showLoadingMore"
          slot="loadMore"
          :style="{
            textAlign: 'center',
            marginTop: '12px',
            height: '32px',
            lineHeight: '32px',
          }"
        >
          <a-spin v-if="loadingMore" />
          <a-button v-else @click="onLoadMore">查看更多项目</a-button>
        </div>
        <a-list-item slot="renderItem" slot-scope="item, index">
          <span slot="actions">
            <a-tooltip title="恢复项目" @click="doAction(item, 'recoveryArchive', index)">
              <a-icon type="undo" />
            </a-tooltip>
          </span>
          <span slot="actions" @click="doAction(item, 'del', index)">
            <a-tooltip title="移至回收站">
              <a-icon type="delete" />
            </a-tooltip>
          </span>
          <a-list-item-meta :description="item.description">
            <router-link :to="'/project/space/task/' + item.code" slot="title">{{ item.name }}</router-link>
            <a-avatar slot="avatar" icon="user" :src="item.cover" />
          </a-list-item-meta>
          <div class="other-info muted">
            <div class="info-item">
              <span>移动日期</span>
              <span>{{ moment(item.archive_time).format('YYYY-MM-DD') }}</span>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </wrapper-content>
  </div>
</template>
<script>
import { list, doData, del } from "@/pearapi/project";
import { checkResponse } from "@/assets/js/utils";
import pagination from "@/mixins/pagination";
//import moment from 'moment';
import { recoveryArchive, recycle } from "@/pearapi/project";

export default {
  mixins: [pagination],
  data() {
    return {
      dataSource: [],
      loading: true,
      showLoadingMore: false,
      loadingMore: false,
      showInviteMember: false,
      currentProject: {},
      currentProjectId: 0,
      newData: {
        id: 0
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    moment,
    init(reset = true) {
      let app = this;
      if (reset) {
        this.dataSource = [];
        this.pagination.page = 1;
        this.pagination.pageSize = 1000;
        this.showLoadingMore = false;
      }
      this.requestData.archive = 1;
      this.requestData.type = "other";
      app.loading = true;
      list(app.requestData).then(res => {
        app.dataSource = app.dataSource.concat(res.data.list);
        app.pagination.total = res.data.total;
        app.showLoadingMore = app.pagination.total > app.dataSource.length;
        app.loading = false;
        app.loadingMore = false;
      });
    },
    onLoadMore() {
      this.loadingMore = true;
      this.pagination.page++;
      this.init(false);
    },
    inviteProjectMember(item) {
      this.currentProject = item;
      this.currentProjectId = item.id;
      this.showInviteMember = true;
    },
    doAction(record, action, index) {
      this.currentProject = record;
      let app = this;
      app.newData = { id: 0 };
      if (action == "recoveryArchive") {
        this.$confirm({
          title: "取消归档项目？",
          content: `取消归档「${this.currentProject.name}」后就可以正常使用了`,
          okText: "取消归档",
          okType: "primary",
          cancelText: "再想想",
          onOk() {
            recoveryArchive(record.code).then(() => {
              app.dataSource.splice(index, 1);
            });
            return Promise.resolve();
          }
        });
      } else if (action == "del") {
        this.$confirm({
          title: "确定放入回收站？",
          content: `一旦将项目「${this.currentProject.name}」放入回收站，所有与项目有关的信息将会被放入回收站`,
          okText: "放入回收站",
          okType: "danger",
          cancelText: "再想想",
          onOk() {
            recycle(record.code).then(() => {
              app.dataSource.splice(index, 1);
            });
            return Promise.resolve();
          }
        });
      }
    }
  }
};
</script>
<style lang="less">
@blue-6: #1890ff;
@magenta-6: #eb2f96;
@pink-6: #eb2f96;
@red-6: #f5222d;
@orange-6: #fa8c16;
@yellow-6: #fadb14;
@volcano-6: #fa541c;
@geekblue-6: #2f54eb;
@lime-6: #a0d911;
@gold-6: #faad14;

// The prefix to use on all css classes from ant.
@ant-prefix: ant;

// -------- Colors -----------
@primary-color: @blue-6;
@info-color: @blue-6;
@processing-color: @blue-6;
@error-color: @red-6;
@highlight-color: @red-6;
@warning-color: @gold-6;
@normal-color: #d9d9d9;
@white: #fff;
@black: #000;

.project-archive-index {
  .project-list {
    .ant-list-item-meta-avatar {
      .ant-avatar {
        width: 50px;
        height: 50px;
        border-radius: 3px;
      }
    }

    .ant-list-item-content {
      .other-info {
        display: flex;

        .info-item {
          display: flex;
          flex-direction: column;
          padding-left: 48px;
        }
      }
    }

    .ant-list-item-action {
      .anticon:hover {
        svg {
          color: @primary-color;
        }
      }
    }
  }
}
</style>
